Tipps und Tricks
Diesen Artikel als PDF ansehen/downloaden(msc) Es kommt bei der Gestaltung von Webseiten immer wieder vor, dass das Resultat im Browser nicht den Vorstellungen des Designers entspricht. Die sorgfältig aufgestellten Layoutvorgaben in der Stildatei scheinen willkürlich verändert oder nur ungenügend umgesetzt.
In so einem Fall ist menschliches Versagen nicht ganz auszuschliessen und auch browserseitiges Versagen kommt vor. Mit anderen Worten: Der Fehler könnte in der Stildatei liegen oder am Browser, der die Angaben im CSS nicht korrekt umsetzt. Häufig liegt das Problem aber in den Tücken der Kaskade.
Die Kaskade bestimmt, wie der Browser aus unterschiedlichen Formatierungsvorschriften die endgültige Darstellung ermittelt. Das Verfahren ist einigermassen komplex; aber gerade deswegen sollten Webdesigner eine Ahnung von diesem Mechanismus haben. Das Verständnis hilft, Fehlern in den Stildateien auf die Schliche zu kommen und zweckmässige CSS-Deklarationen zu entwickeln.
Die Ausgangslage ist die: Jedesmal, wenn eine Webseite zur Anzeige gelangt, muss der Browser eine Reihe von Stilvorgaben berücksichtigen. Auch bei simpel formatierten HTML-Seiten nehmen drei bis vier Stildateien Einfluss auf das Aussehen: Das Browserstylesheet bestimmt das Aussehen «nackter» HTML-Seiten, d.h. von Webseiten ohne verknüpfte CSS-Datei. Es legt die Schriftgrössen der Überschriften fest und definiert die Einrückung von Aufzählungen, Listen und Ähnliches.
Manche Surfer haben auf ihrem Browser eine eigene Stildatei eingerichtet. Dieses Benutzerstylesheet sorgt beispielsweise über grössere Schriften für eine bessere Lesbarkeit der Texte. Das Autorenstylesheet ist dasjenige, das der Webdesigner mit der HTML-Seite verknüpft hat – es bestimmt den individuellen Look einer Seite.
Als erstes berücksichtigt der Browser die Herkunft einer Regel und zwar nach folgender Priorität:
- Benutzerstylesheet mit !important
- Autorstylesheet mit !important
- Autorstylesheet
- Benutzerstylesheet
- Browserstylesheet
Nun kann es sein, dass die Formatierungsvorgaben in ein und derselben CSS-Datei miteinander konkurrieren – das kommt sogar recht häufig vor, wenn man mit Absatz- und Inline-Stilen arbeitet und Selektoren verwendet. Die Website Css4you.de zeigt dazu ein einleuchtendes Beispiel (http://css4you.de/wscss/css06.html):
Eine HTML-Datei enthält den folgenden Code:
Ein Absatz mit p nun in einem span-Tagund jetzt sogar mit class-Selektor gefolgt von einem ID-Selektor
Formatiert wird es über folgende Stilangaben:
span {color: blue;}
p {color: black;}
p span {color: green;}
span.em {color: yellow;}
#id {color: red;}
Das Resultat ist das folgende:
Ein Absatz mit p nun in einem span-Tag und jetzt sogar mit class-Selektor gefolgt von einem ID-Selektor
Man sieht: Der ID-Selektor hat Vorrang vor allen anderen Deklarationen. An zweiter Stelle der Hackordnung ist der Inline-Stil mit Klasse em, danach folgt der verschachtelte Selektor p span, der die Formatierungsangaben für Inline-Formatierungen vorgibt, die innerhalb von
Je höher dieser Wert, desto spezifischer – und wichtiger – ist eine Formatierungsanweisung. Wenn zwei Werte mit gleicher Spezifität aufeinander treffen, gewinnt die, die weiter unten in der Stildatei steht.
Die Spezifität berechnen
Mit folgender Methode berechnen Browser Spezifität von Deklarationen:
- Das Style-Attribut, mit dem Formatierungen direkt im HTML-Dokument zugewiesen werden, hat die höchste Priorität; es erhält den Wert 1000 in Spalte a.
- Als nächstes zählt der Browser die ID-Selektoren (also Formate, die mit dem Gartenhag # beginnen). Diese Zahl wird mit 100 multipliziert.
- Die Zahl der Klassenattribute und Pseudoklassen (Klassen mit Doppelpunkt am Anfang, beispielsweise :visited oder :active) zählt zehnfach.
- Die Zahl der Elementnamen und der Pseudoelemente (Elemente mit Doppelpunkt wie :after oder :first-letter) zählt einfach.
Einige Beispiele für Spezifitäten:
| Selektor | a | b | c | d | Spezifität |
| style="" | 1 | 0 | 0 | 0 | 1000 |
| * | 0 | 0 | 0 | 0 | 0000 |
| p | 0 | 0 | 0 | 1 | 0001 |
| p:first-child | 0 | 0 | 0 | 2 | 0002 |
| div p | 0 | 0 | 0 | 2 | 0002 |
| div p + span | 0 | 0 | 0 | 3 | 0003 |
| div p span.red | 0 | 0 | 1 | 3 | 0013 |
| #name | 0 | 1 | 0 | 0 | 0100 |
(msc) Die Brotkrümel-Navigation (englisch Breadcrumb-Navigation) hat ihren Namen vom Märchen «Hänsel und Gretel» der Gebrüder Grimm und spielt darauf an, dass die beiden Kinder ihren Weg durch den Wald mit Brotkrümeln markierten. Analog zeigt man mit der Brotkrümel-Navigation den Weg in die «Tiefen» einer Website auf, wobei alle übergeordneten Verzeichnisse als Pfad aufgelistet werden.
Die Krümel lassen sich – per PHP – auch automatisch streuen. Das oben abgebildete Script stammt von Florian Fischer von DrWeb.de und erledigt den Job mit gut zwölf Zeilen Code. Wichtig ist, dass die Verzeichnisse sprechende Namen haben und auf dem Server eine sinnvolle Dateistruktur herrscht.
Das Script benötigt PHP ab Version 4.
$an="Die Adresse dieser Seite: ";
$home="http://www.publisher.ch/"; // Gibt Startseite vor
$pie=explode("/","$_SERVER[PHP_SELF]");
$tr=" > "; // Das Trennzeichen. Alternativ : oder /
$b=count($pie);
echo $an."Startseite";
for($a=1;$a<$b-1;$a++){
$ta=$ta.$pie[$a]."/";
echo $tr."".
ucfirst($pie[$a])."";}
$file=explode('.',ucfirst($pie[$b-1]));
echo "".$tr.$file[0]."";
?>
Brotkrumen streuen und die Navigation automatisch erstellen.
(msc) Google durchsucht das ganze bekannte Internet, oder bei Bedarf auch nur eine einzelne Site. Über den Zusatz site:publisher.ch ist es möglich, die Suchabfrage auf die Site Publisher.ch einzuschränken. Kennt man den Site-Parameter bei der Google-Suche, durchsucht man als Surfer auch Websites, die keine eigene Volltextsuche anbieten.
Google, die umtriebige Allerweltssuchmaschine, bietet auch für Webmaster einen simplen Weg, eine Volltextsuche anzubieten. Der Dienst heisst «Site-Flavored Google Search» und ist simpel zu verwenden: Man gibt die Adresse an, vergibt eine Kategorie und erhält im Gegenzug einige Zeilen HTML-Code, über die sich die Google-Suchmaske auf der eigenen Website einbinden lässt. Wer der Omnipräsenz von Google entgehen will, kann stattdessen den Dienst von master.com verwenden.
(msc) Eine nützliche GoLive-Funktion, die man neu in der CS2-Version findet, steckt im Menü «Spezial» und heisst «Konvertieren». Es gibt eine Reihe von Konvertierungsmöglichkeiten: Beispielsweise die Möglichkeit, Tabellen in Layout-Raster umzuwandeln, oder umgekehrt. Besonders interessant ist der Menüpunkt «Stile». Er sucht nach HTML-Tags wie font, em oder strong und konvertiert sie in div oder span-Blöcke mit der passenden Klasse. So kann man beispielsweise nach allen Vorkommnissen des Tags suchen und sie durch ersetzen. Das ist ein praktischer Weg, alte HTML-Formatierungs-Sünden zu eliminieren und sie durch saubere CSS-Klassen zu ersetzen.
Bei Bedarf steht auch der Weg in umgekehrter Richtung offen. Man kann somit auch CSS-Stile durch HTML-Tags ersetzen und beispielsweise die Blöcke entfernen und die fraglichen Texstellen stattdessen mit der HTML-Formatierungsangabe auszeichnen.
Die Stilkonvertierung ist einfach zu verwenden: Man wählt die zu bearbeitenden Seiten aus (es lassen sich auch ganze Sites in einem Aufwisch bearbeiten) und klickt auf die Schaltfläche «Stile sammeln». In der Liste erscheinen die vorhandenen Stile, aus denen man den gewünschten auswählt. Über das Symbol mit dem Pfeil nach unten legt man fest, was mit diesem Stil zu geschehen hat.
(msc) Viele Websites begrüssen Surfer mit der Frage, welche Sprache denn genehm sei. Eine überflüssige Umstandskrämerei: Der Browser der Besucher übermittelt die sprachlichen Vorlieben des Anwenders automatisch. (Die Spracheinstellung trifft man beim Internet Explorer unter Extras > Internetoptionen im Reiter «Allgemein» bei der Schaltfläche «Sprachen» und bei Firefox unter Extras > Einstellungen im Reiter «Allgemein» bei «Sprachen bearbeiten»).
Der weit verbreitete Webserver Apache bietet mit einem Mechanismus namens «Content Negotiation» eine praktische Möglichkeit, mehrsprachige Sites zu pflegen – komfortabel, ohne Sprachabfragen und ohne Programmierung. Wer mehrsprachige Websites betreut, sollte sich unbedingt damit vertraut machen:
http://de.wikipedia.org/wiki/Content_Negotiation